create-react-app + emotion 環境構築
導入
インストール
code:terminal
yarn add @emotion/react @craco/craco
yarn add -D @emotion/babel-plugin @types/react-dom
craco → Create React Apps Configration Overrideの設定(jsx pragmaを書かなくてもいいように)
code:craco.config.js
module.exports = {
babel: {
presets: [
[
"@babel/preset-react",
{ runtime: "automatic", importSource: "@emotion/react" },
],
],
},
};
cracoコマンドに書き換え
code:package.json
"scripts": {
- "start": "react-scripts start",
+ "start": "craco start",
- "build": "react-scripts build",
+ "build": "craco build",
- "test": "react-scripts test",
+ "test": "craco test",
"eject": "react-scripts eject"
},
一旦ここまででemotionは利用できる。
code:app.js
import { css } from '@emotion/react'
const App = () => {
return <div css={wrap}>hello</div>
}
const wrap = css`
color: blue;
`
export default App
TypeScript対応。以下を追加
code:tsconfig.json
tsconfig.json
{
"compilerOptions": {
...
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "jsxImportSource": "@emotion/react"
},
...
}
参考